<template>
    <div class="page rdsp-fix-botttom-page goRectification-page" data-page="goRectification" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">隐患整改</div>
            <div class="go-history-list">
                <a href="#" class="link" @click="attention">
                    <i class="iconfont icon--" id="noAttention_{{getNewId}}"
                       style="font-size: 23px;"></i>
                    <i class="iconfont icon--" id="attention_{{getNewId}}" style="font-size: 23px;display: none;"></i>
                </a>
            </div>
        </div>
        <div class="page-content">
            <div class="tb-modify-record-con">
                <div id="hiddenCheck-swiper_{{getNewId}}" class="swiper-container">
                    <div class="swiper-pagination" id="hiddenCheck_pagination_{{getNewId}}"></div>
                    <div class="swiper-wrapper" id="hiddenCheck_swiper_{{getNewId}}"></div>
                </div>
                <div id="tb-modify-record_{{getNewId}}">
                    <div class="form-hiddenDanger">
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block" id="trouble-pai-people_{{getNewId}}">
                                <div class="right-con">
                                    <div class="right-datail tb-appoint-person">由
                                        <span id="tb-person_{{getNewId}}"></span>指派
                                    </div>
                                </div>
                            </div>
                            <div class="hiddenDanger-block">
                                <div id="troubledes_app_{{getNewId}}"></div>
                                <div class="right-con">
                                    <div id="hiddenDangerDesc_{{getNewId}}"
                                         class="right-datail tb-appoint-detail"></div>
                                </div>
                            </div>
                            <div class="hiddenDanger-block">
                                <div class="right-con">
                                    <div class="right-datail">
                                        <i class="iconfont icon-dingweiweizhi"
                                           style="color:#2471CA;font-size: 14px;"></i>
                                        <span class="tb-adds" id="tb-adds_{{getNewId}}"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="hiddenDanger-block">
                                <div class="right-con create-person">
                                    <div class="right-datail tb-create-info">
                                        <div>
                                            <img src="/ilink-app-h5-zd/static/img/rdspFile_1553591751238.png"
                                                 class="appoint-tx-img">
                                        </div>
                                        <div class="tb-sava-name" id="tb-sava-name_{{getNewId}}"></div>
                                        <div class="appoint-create-time">创建于
                                            <span id="tb-sava-time_{{getNewId}}"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-hiddenDanger" style="margin-bottom: 30px;">
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class="fl trouble-left-title">责任单位</div>
                                <div id="tb-resUnit_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class="fl trouble-left-title">责任人</div>
                                <div id="tb-respel_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">隐患等级</div>
                                <div id="tb-level_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">隐患类别</div>
                                <div id="tb-type_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">相关资产</div>
                                <div id="tb-assts_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">相关物联设备</div>
                                <div id="tb-eqSys_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">消防系统</div>
                                <div id="tb-fireSys_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                        <div class="rdsp-inner-content">
                            <div class="hiddenDanger-block trouble-item">
                                <div class=" fl trouble-left-title">整改期限</div>
                                <div id="tb-endtime_{{getNewId}}" class="fr"></div>
                            </div>
                        </div>
                    </div>
                    <div style="color: #333333; font-size: 17px;margin-bottom: 35px;font-weight: 600;">整改记录</div>
                    <div id="tb-modify-detail_{{getNewId}}"></div>
                    <div id="trouble-pai_{{getNewId}}" class="trouble-content-head">
                        <div class="el-timeline-item__tail"></div>
                        <div class="trouble-detail-type">派</div>
                        <div class="trouble-time" id="trouble-appoint-time_{{getNewId}}"></div>
                        <div class="trouble-detail-content">由<span
                                id="trouble-appoint-account_{{getNewId}}"></span>指派<span
                                id="trouble-manage-account_{{getNewId}}"></span>为责任人
                        </div>
                    </div>
                    <div class="trouble-content-head">
                        <!-- <div class="el-timeline-item__tail"></div> -->
                        <div class="trouble-detail-type">建</div>
                        <div class="trouble-time" id="trouble-create-time_{{getNewId}}"></div>
                        <div class="trouble-detail-content">由<span id="trouble-create-account_{{getNewId}}"></span>创建
                        </div>
                    </div>
                </div>
                <footer id="btn_footer_goRectification_{{getNewId}}" class="rdsp-fix-botttom goRectifica-footer"
                        style="margin-top:0px;">
                    <span style="background-color: #3e8ffd;margin-bottom: 50px;margin-top:0px;"
                          @click="addRectification">添加整改</span>
                </footer>
            </div>
        </div>
</template>
<style scoped>

    .tb-adds {
        font-size: 14px;
        color: #999999;
        margin-left: 4px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .tb-sava-name {
        position: relative;
        top: -52px;
        left: 71px;
        font-size: 16px;
        color: #333333;
    }

    .tb-modify-record-con {
        margin: 0 20px;
        margin-bottom: 50px;
    }

    .trouble-left-title {
        margin-left: 0;
        line-height: normal;
    }

    .every-hidden-list {
        width: 100%;
        height: 200px;
    }

    .trouble-stop {
        padding: 0 25px;
    }

    .trouble-detail-content {
        left: 26px;
    }

    .trouble-content-head {
        padding-bottom: 0px;
    }
</style>

<script>
    return {
        mounted() {
            var self = this;
            var $ = self.$;
        },
        beforeCreate() {
            var self = this;
            var $ = self.$;
        },
        data: function () {
            return {
                tbId: '',
                touBgrade: {}, //全部等级
                touBValueObj: {}, //全部类别

                userObj: {}, //联网单位下人员
                endTimeType: 0, //整改期限
                troubleRank: 0, //等级id
                categoryId: 0, //类别id
                currentOrgId: 0, //责任单位id
                currentOrgName: '', //责任单位名称
                hiddenDangerId: 0, //隐患整改id
                createAccount: '', //创建人账户

                chargePerson: '', //责任人

                details: '', //改条隐患详细信息

                isShow: true,
                touBType: [],
                gifPath: staticPath + "img/apply/voicePlay.gif",
                imgPath: staticPath + "img/apply/voicePlay.png",
                noimgPath: staticPath + "img/apply/novoicePlay.png",
                dshiqi: null,
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            addRectification: function () {
                // 联网单位id 隐患整改id 创建人账户 隐患等级id 隐患类型id
                app.router.navigate("/addRectification/" + this.currentOrgId + "/" + this.hiddenDangerId + "/" +
                    this.createAccount + "/" + this.troubleRank + "/" + this.categoryId + "/");
            },
            //关注
            attention: function () {
                var self = this;
                var $ = self.$;
                if (self.isCollect == 1) { // 取消关注
                    app.params.dialog.buttonCancel = "取消";
                    app.params.dialog.buttonOk = "确认";
                    app.dialog.confirm('确认取消关注此隐患?', '确认', function () {
                        common.loading(1);
                        Dao.focusOnOff({
                            userAccount: userInfor.accountName,
                            type: "5",
                            userName: userInfor.accountName,
                            concemId: self.$route.params.id
                        }, function (data) {
                            common.loading(0);
                            self.isCollect = 0;
                            $("#noAttention_" + self.getNewId).css("color", "#333333");
                            $("#attention_" + self.getNewId).hide();
                            $("#noAttention_" + self.getNewId).show();
                            app.methods.showToastCenter("取消关注成功");
                            app.methods.refreshMineFocus();
                        }, function (e) {
                            common.loading(0);
                            app.methods.showToastCenter("取消关注失败");
                        });
                    });
                } else {
                    common.loading(1);
                    Dao.addUserConcem({
                        userAccount: userInfor.accountName,
                        type: "5",
                        concemId: self.$route.params.id,
                        userName: userInfor.accountName
                    }, function (data) {
                        common.loading(0);
                        self.isCollect = 1;
                        $("#attention_" + self.getNewId).css("color", "red");
                        $("#noAttention_" + self.getNewId).hide();
                        $("#attention_" + self.getNewId).show();
                        app.methods.showToastCenter("关注成功");
                        app.methods.refreshMineFocus();
                    }, function (e) {
                        common.loading(0);
                        app.methods.showToastCenter("关注失败");
                    });
                }
            },
            htmlGetHidDanger: function (selectId) {
                var self = this;
                var hiddenDangerId = self.$route.params.id;
                if (selectId) {
                    hiddenDangerId = selectId;
                }
                Dao.getHidDanger({
                    account: userInfor.accountName,
                    hiddenDangerId: hiddenDangerId,
                }, function (data) {
                    showVoiceBtn("#troubledes_app_" + self.getNewId, data.voiceLength, data.hiddenDangerVoice);
                    //责任人有整改权限
                    if (userInfor.accountName == data.chargePerson) {
                        jQuery("#btn_footer_goRectification_" + self.getNewId).show();
                    } else {
                        jQuery("#btn_footer_goRectification_" + self.getNewId).hide();
                    }

                    var flag = false;
                    var image = "";
                    if (data.picUrls != null && data.picUrls != '') {
                        image = data.picUrls.split(',');
                        $("#hiddenCheck_swiper_" + self.getNewId).empty();
                        if (image.length > 1) {
                            flag = true;
                        }
                        for (var i = 0; i < image.length; i++) {
                            if(image[i].substr(image[i].length - 3) === 'mp4' || image[i].substr(image[i].length - 3) === '3gp' || image[i].substr(image[i].length - 4) === 'mpeg' || image[i].substr(image[i].length - 6) === 'mavip4' || image[i].substr(image[i].length - 3) === 'flv' || image[i].substr(image[i].length - 3) === 'mov'){
                                $("#hiddenCheck_swiper_" + self.getNewId).append(`<div class="swiper-slide every-hidden-list" data-index="`+i+`" style="background:url(` + staticPath + `img/common/video_list_detail.png` + `) center no-repeat;background-size: cover;"></div>`)
                            }else{
                                $("#hiddenCheck_swiper_" + self.getNewId).append(`<div class="swiper-slide every-hidden-list" data-index="`+i+`" style="background:url(` + image[i] + `) center no-repeat;background-size: cover;"></div>`);
                            }
                        }
                        app.lazy.create("#hiddenCheck_swiper_" + self.getNewId);
                        jQuery("#hiddenCheck_swiper_" + self.getNewId+' .swiper-slide').off('click').on('click', {'data': image}, function (e) {
                            openAndShowBigImage(image, parseInt(e.currentTarget.getAttribute('data-index')));
                        });
                        if (flag) {
                            var hiddenCheck_swiper = new Swiper('#hiddenCheck-swiper_' + self.getNewId, {
                                direction: 'horizontal',
                                loop: false,
                                slidesPerView: "auto",
                                pagination: {
                                    el: '#hiddenCheck_pagination_' + self.getNewId,
                                },
                            });
                        }
                    }
                    self.troubleRank = data.gradeId;
                    self.categoryId = data.categoryId;
                    self.currentOrgId = data.orgId;
                    self.hiddenDangerId = data.id;
                    self.createAccount = data.createAccount;
                    self.chargePerson = data.chargePerson;
                    self.endTime = data.endTime;
                    self.details = data;

                    self.isCollect = data.isCollect;
                    if (self.isCollect === 1) { // 关注
                        $("#attention_" + self.getNewId).css("color", "red");
                        $("#attention_" + self.getNewId).show();
                        $("#noAttention_" + self.getNewId).hide();
                    }
                    //切换了责任单位，原单位用户从消息点击过来判断
                    var orgIds = userInfor.organizationIds.split(',');
                    if (-1 === jQuery.inArray(self.currentOrgId.toString(), orgIds)) {
                        jQuery("#btn_footer_goRectification_" + self.getNewId).hide();
                        jQuery("#btn_footer_goRectification_" + self.getNewId).parent().css("padding-bottom", '0px');
                    }

                    $("#hiddenDangerDesc_" + self.getNewId).empty();
                    $("#hiddenDangerDesc_" + self.getNewId).append(common.transNullundefinedToline(data.hiddenDangerDesc));

                    $("#tb-adds_" + self.getNewId).empty();
                    $("#tb-adds_" + self.getNewId).append(common.transNullundefinedToline(data.addrDesc));

                    //指派人
                    if (data.managerPerson && data.managerPersonName) {
                        $("#trouble-pai-people_" + self.getNewId).show();
                        $("#tb-person_" + self.getNewId).html(data.managerPersonName).show();
                    } else {
                        $("#trouble-pai-people_" + self.getNewId).hide();
                    }

                    $("#tb-sava-name_" + self.getNewId).empty();
                    $("#tb-sava-name_" + self.getNewId).append(common.transNullundefinedToline(data.createAccountName));

                    $("#tb-sava-time_" + self.getNewId).empty();
                    $("#tb-sava-time_" + self.getNewId).append(common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(
                        data.createTime)));

                    $("#tb-level_" + self.getNewId).empty();
                    $("#tb-level_" + self.getNewId).append(common.transNullundefinedToline(data.gradeName));

                    $("#tb-type_" + self.getNewId).empty();
                    $("#tb-type_" + self.getNewId).append(common.transNullundefinedToline(data.categoryName));

                    $("#tb-assts_" + self.getNewId).html(common.transNullundefinedToline(data.relateAssetsNames))

                    $("#tb-eqSys_" + self.getNewId).html(common.transNullundefinedToline(data.relateFcfNames));
                    $("#tb-fireSys_" + self.getNewId).html(common.transNullundefinedToline(data.systemName));

                    $("#tb-resUnit_" + self.getNewId).empty();
                    $("#tb-resUnit_" + self.getNewId).append(common.transNullundefinedToline(data.orgName));

                    $("#tb-respel_" + self.getNewId).empty();
                    $("#tb-respel_" + self.getNewId).append(common.transNullundefinedToline(data.chargePersonName));

                    $("#tb-endtime_" + self.getNewId).empty();
                    self.endTimeStr = data.endTime;
                    $("#tb-endtime_" + self.getNewId).append(common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(
                        data.endTime)));

                    $("#trouble-appoint-time_" + self.getNewId).empty();
                    $("#trouble-appoint-time_" + self.getNewId).append(common.getTimeToyyyymmddhhmm(data.updateTime));


                    if (data.managerPerson) {
                        $("#trouble-pai_" + self.getNewId).show();
                        $("#trouble-appoint-account_" + self.getNewId).html(common.transNullundefinedToline(data.managerPersonName));
                        $("#trouble-manage-account_" + self.getNewId).html(common.transNullundefinedToline(data.chargePersonName));
                    } else {
                        $("#trouble-pai_" + self.getNewId).hide();
                    }

                    $("#trouble-create-time_" + self.getNewId).empty();
                    $("#trouble-create-time_" + self.getNewId).append(common.getTimeToyyyymmddhhmm(data.createTime));

                    $("#trouble-create-account_" + self.getNewId).empty();
                    $("#trouble-create-account_" + self.getNewId).append(common.transNullundefinedToline(data.createAccountName));

                    //1整改记录或2驳回记录3修改信息
                    var details = data.details;
                    if (details != null && details.length > 0) {
                        $("#tb-modify-detail_" + self.getNewId).empty();
                        for (var i = 0; i < details.length; i++) {
                            var bean = details[i];
                            //1整改记录
                            if (bean.type == 1) {
                                $("#tb-modify-detail_" + self.getNewId).append(
                                    `<div class="trouble-content-head">
                                        <div class="trouble-detail-type" id="trouble_detail_type_status_zheng_`+self.getNewId+`">整</div>
                                        <div class="trouble-detail-type" style="background-color:#77be07;display:none" id="trouble_detail_type_status_yes_`+self.getNewId+`">√</div>
                                        <div class="el-timeline-item__tail"></div>
                                        <div class="trouble-time">` + common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(bean.createTime)) + `</div>
                                        <div class="trouble-stop" id="rec-recordtrouble` + bean.id + `_` + self.getNewId+`"></div>
                                        <div class="trouble-imgs" id="rec-record-img` + bean.id + `_` + self.getNewId+`"></div>
                                        <div id="voiceContainer_` + bean.id  + `_` + self.getNewId+`" style="margin-left:26px;"></div>
                                        <div class="trouble-detail-content-finshed">` + common.transNullundefinedToline(bean.detailDesc) + `</div>
                                        <div id="id-trouble-from-finish1_`+self.getNewId+`" class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `整改</div>
                                        <div id="id-trouble-from-finish2_`+self.getNewId+`" style="display:none" class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `核实通过</div>
                                    </div>
                                `);
                                if (bean.isStopSystem == 1) {
                                    $("#rec-recordtrouble" + bean.id + "_" + self.getNewId).html(`
                                        <span style='font-size: 12px;background-color: #f7b510;color: #fff;padding: 1px;border-radius: 3px;'>停用系统</span>
                                        <p><b>开始停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopStartTime) + `</p>
                                        <p><b>结束停用</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.stopEndTime) + `</p>
                                        <p><b>安全措施</b>&nbsp;&nbsp;` + common.transNullundefinedToline(bean.safetyMethod) + `</p>
                                    `);
                                }
                                //展示语音
                                showVoiceBtn("#voiceContainer_" + bean.id + "_" + self.getNewId, bean.detailVoiceLength, bean.detailVoiceUrl);
                                if (bean.picUrls != null && bean.picUrls != '') {
                                    var image = bean.picUrls.split(',');
                                    showImage(jQuery("#rec-record-img" + bean.id + "_" + self.getNewId), image.toString(), 3);
                                }
                            }
                            //2驳回记录
                            else if (bean.type == 2) {
                                $("#tb-modify-detail_" + self.getNewId).append(`
                                    <div class="trouble-content-head">
                                        <div class="trouble-detail-type">驳</div>
                                        <div class="el-timeline-item__tail"></div>
                                        <div class="trouble-time">` + common.transNullundefinedToline(common.getTimeToyyyymmddhhmm(bean.createTime)) + `</div>
                                        <div class="trouble-imgs" id="rec-record-img` + bean.id + `_` + self.getNewId+`"></div>
                                        <div id="voiceContainer_` + bean.id + `_` + self.getNewId+`" style="margin-left:26px;"></div>
                                        <div class="trouble-detail-content-finshed">` + common.transNullundefinedToline(bean.detailDesc) + `</div>
                                        <div class="trouble-detail-content-finish">由` + common.transNullundefinedToline(bean.createAccountName) + `驳回</div>
                                    </div>
                                `);
                                //展示语音
                                showVoiceBtn("#voiceContainer_" + bean.id + "_" + self.getNewId, bean.detailVoiceLength, bean.detailVoiceUrl);
                                if (bean.picUrls != null && bean.picUrls != '') {
                                    var image = bean.picUrls.split(',');
                                    showImage(jQuery("#rec-record-img" + bean.id + "_" + self.getNewId), image.toString(), 3);
                                }
                            }
                            //3修改记录
                            else if (bean.type == 3) {
                            }
                        }
                        //返回隐藏
                        if(data.status==2){
                            jQuery("#trouble_detail_type_status_zheng_"+self.getNewId).hide();
                            jQuery("#trouble_detail_type_status_yes_"+self.getNewId).show();
                            jQuery("#id-trouble-from-finish1_"+self.getNewId).hide();
                            jQuery("#id-trouble-from-finish2_"+self.getNewId).show();
                            jQuery("#btn_footer_goRectification_" + self.getNewId).hide();
                        }
                    }
                });
            },

        },
        on: {
            pageInit: function (e, page) {
                if (userInfor.isMuilUnitUser == 0) {
                    $('#tb-resUnit_' + self.getNewId).next().css('display', 'none');
                }
            },
            pageBeforeIn: function (e, page) {
                this.htmlGetHidDanger();
            },
            pageAfterIn: function (e, page) {
                var self = this;
                var $ = self.$;
                if (1 == indexHiddenDangerStatus) {
                    common.loading(1);
                    setTimeout(function () {
                        if (indexFlag == 0) {
                            indexHiddenDangerStatus = 0;
                            indexFlag = 0;
                            //app.router.back();
                            //【完成，提交审核】或者【保存，继续整改】保存后的返回
                            jQuery("#btn_footer_goRectification_" + self.getNewId).hide();
                        } else {
                            indexHiddenDangerStatus = 0;
                            indexFlag = 0;
                            app.methods.backToTab();
                        }
                        common.loading(0);
                    }, 50);
                } else {

                }
                // jQuery(".form-hiddenDanger .rdsp-inner-title").click(function (e) {
                //     jQuery(e.currentTarget).parent().toggleClass("show");
                //     jQuery(e.currentTarget).siblings(".rdsp-inner-content").slideToggle();
                // });
            },
        }
    }
</script>
